<template>
<div class="home">
    通过ref定义响应式数据配合ts
    <h1>父组件</h1>
    <hr>
    <div ref="son">年龄大于19岁的学生</div>
    <!-- <componentChart id="commonChart" type="line"  :loading="state.lineObj.loading" :titleObj="state.lineObj.title" :series="state.lineObj.series" :xData="state.lineObj.xData"></componentChart> -->
    <!-- <line2 id="lineChart" type="line"  :loading="state.lineObj.loading" :titleObj="state.barObj.title" :series="state.barObj.series" :xData="state.barObj.xData"></line2> -->
    <!-- <bar1 id="lineChart2" type="line"  :loading="state.lineObj.loading" :titleObj="state.barObj.title" :series="state.barObj.series" :xData="state.barObj.xData"></bar1> -->
    <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item
      ><a href="/">promotion management</a></el-breadcrumb-item
    >
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  </el-breadcrumb>
</div>
</template>

<script setup lang='ts'>
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs';
import {useHome} from'./home'
import { reactive, ref,onMounted,nextTick, computed} from 'vue'
// import componentChart from '@/components/lineChart.vue';
// import line2 from '@/components/line2.vue'
// import bar1 from '@/components/bar1.vue'
</script>

<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
</style>